<template>
  <div class="App">
    <h1 class="content">我是App</h1>
    <input type="text" ref="iptEle"/>
    <button @click="getMsg">获取输入框的内容</button>
    <Count/>
  </div>
</template>

<script>
import Count from '@/components/Count';

export default {
  name: 'App',
  components: {
    Count,
  },
  methods:{
    // 点击按钮收集表单数据：
    // 推荐：把表单和数据进行数据双向绑定，直接获取数据的值即可
    // ref:获取到表单的元素，进行DOM操作

    // ref的使用想要获取真实dom，则在当前模板元素上添加一个ref元素，值为一个字符串
    //当模板渲染后，在当前的组件实例上的$refs对象中，就会有一个当前字符串名称的属性，值为被设置ref的真实DOM

    getMsg() {
      console.log(this);
      console.log(this.$refs.iptEle.value);
    }
  }
}
</script>



